<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>点击文字展开与收起</title>
		<style>
			#content{
				width: 500px;
				background-color: #ccc;
				line-height: 26px;
				margin: 0 auto;
			}
			a{
				text-decoration: none;
				color: red;
			}
			#controller{
				display: inline-block;
				
				background: aquamarine;
				position: fixed;
				right: 300px;
				top: 0;
			}
		</style>
	</head>
	<body>
		<div id="content">
			2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了
		</div>
		<a id="controller">
			这是控制用开关
		</a>
		<script>
			//实现思路和原理暂定：其实是步骤 原理还没写出来
			/*视觉：先在网站加载前就把限定的文字内容跟原先的做替换 限定字符数+展开省略号等说明状态的记号
			 *事件触发：
			 *  1.事件触发承载的元素
			 *  2.事件触发：
			 * 		满足要求之后的结果：  内容上的 结构上的 动画上的
			 * 		事件不满足的结果 通过函数来判定
			 *  
			 操作对象 操作过程 结束之后 返回什么
			 */
			 function GUID() {
		        var G1 = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1) + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
		        var G2 = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1) + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
		        return (G1 + G2);
		    }
			console.log("生成的第一个随机数"+(1 + Math.random()));//第一层随机数
			console.log("这是utf-16编码还是"+0x10000);//这是utf-16编码还是？
			console.log('第一次生成数值'+((1 + Math.random()) * 0x10000));//两个相乘
			console.log('就算成立了也不会停止运算'+(((1 + Math.random()) * 0x10000) | 0));//并运算符不会变化
			console.log('转成16进制'+(((1 + Math.random()) * 0x10000) | 0).toString(16));//
			console.log('提取一位'+(((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1));
				var len = 60 ; //设定显示字数 是否可以限定默认显示高度
				var ctn =document.getElementById("content");
				var content = ctn.innerHTML;//innerHTML 所有代码格式
				var con = document.getElementById("controller");//如果是多个这样的文本呢
				//生成元素
				var span = document.createElement("span");
				var a = document.createElement("a")//这是控制开关的元素
				span.innerHTML = content.substring(0,len);
				/*字符串对象的方法：返回一个新的字符串 substring，接受开始于结束两个参数 不接受负数
				 * slice()返回一个新的字符串 区别在于可以填入负数 负数则是从倒数开始提取
				 * split()则是将字符串分割为字符串数组 与正则相对应 应该也是不改变原字符串 返回新数组 可传入字符串和正则表达式当规则 后续数字当数组长度
				*/
				a.innerHTML = content.length>len?"...点击展开更多":"";//根据内容判定此时是收起还是打开
				a.href = "javascript:void(0)";//设定a链接点击不跳转
				//绑定点击事件 如果是收起状态 就把内容给展开 并把a标签的文字样式更改  动画的起始与终结
				a.onclick = function () {
					if(a.innerHTML.indexOf("展开")>0){
						a.innerHTML = "<<&nbsp;收起";
						span.innerHTML = content;
					}else{
						a.innerHTML="...展开";
						span.innerHTML = content.substring(0,len);
					}
				}
				//
				ctn.innerHTML = "";
				ctn.appendChild(span);
				ctn.appendChild(a);
				
				//没有加动画和其他
		</script>
	</body>
</html>
